<!DOCTYPE html>
<html>
<head>
	<title>Water Ripple Button</title>
	<style>
		/* 按钮样式 */
		.button {
			position: relative;
			display: inline-block;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			background-color: #2196F3;
			color: #fff;
			font-size: 16px;
			cursor: pointer;
			overflow: hidden;
			z-index: 1;
		}

		/* 水波纹动画 */
		.ripple {
			position: absolute;
			border-radius: 50%;
			background-color: rgba(255, 255, 255, 0.7);
			animation-name: ripple;
			animation-duration: 1s;
			animation-timing-function: ease-out;
			animation-fill-mode: forwards;
		}

		/* 动画关键帧 */
		@keyframes ripple {
			from {
				transform: scale(0);
				opacity: 1;
			}
			to {
				transform: scale(2);
				opacity: 0;
			}
		}
	</style>
</head>
<body>
	<button class="button" onclick="createRipple(event)">Click Me</button>

	<script>
		// 创建水波纹元素
		function createRipple(event) {
			const button = event.currentTarget;
			const circle = document.createElement("div");
			button.appendChild(circle);

			// 计算水波纹的位置和大小
			const diameter = Math.max(button.clientWidth, button.clientHeight);
			const radius = diameter / 2;
			circle.style.width = circle.style.height = `${diameter}px`;
			circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
			circle.style.top = `${event.clientY - button.offsetTop - radius}px`;

			// 启动动画
			circle.classList.add("ripple");
			setTimeout(() => circle.remove(), 1000);
		}
	</script>
</body>
</html>